<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
    <!-- See http://webkit.org/b/55515 for explanation that goes with this giagram -->
    <defs>
        <symbol id="chain">
            <line x1="5" y1="5" x2="5" y2="140" stroke="darkgray" />
            <circle cx="5" cy="20" r="3" fill="white" stroke="darkgray" />
            <circle cx="5" cy="35" r="3" fill="white" stroke="darkgray" />
            <circle cx="5" cy="50" r="3" fill="white" stroke="darkgray" />
            <circle cx="5" cy="65" r="3" fill="white" stroke="darkgray" />
            <circle cx="5" cy="80" r="3" fill="white" stroke="darkgray" />
            <circle cx="5" cy="95" r="3" fill="white" stroke="darkgray" />
            <circle cx="5" cy="110" r="3" fill="white" stroke="darkgray" />
            <circle cx="5" cy="125" r="3" fill="white" stroke="darkgray" />
            <circle cx="5" cy="140" r="4" fill="white" stroke="black" />
        </symbol>
    </defs>
    <g id="shadow-boundary-1">
        <line x1="140" x2="160" y1="230" y2="230" stroke="lightgray" />
        <text x="163" y="227" font-family="Helvetica" font-size="8" fill="lightgray">shadow boundary</text> 
    </g>
    <use x="145" y="150" xlink:href="#chain" />
    <text x="157" y="153" font-family="Helvetica" font-size="8">lowest common ancestor</text>
    <text x="157" y="296" font-family="Helvetica" font-size="8">target</text>
    <g id="related-target" transform="rotate(45, 150, 155)">
        <g id="shadow-boundary-2">
            <line x1="140" x2="160" y1="230" y2="230" stroke="lightgray" />
            <text x="20" y="200" transform="rotate(-45, 145, 150)" font-family="Helvetica" font-size="8" fill="lightgray">shadow boundary</text> 
        </g>
        <g id="first-divergent-boundary">
            <line x1="140" x2="160" y1="185" y2="185" stroke="red" />
            <text x="40" y="167" transform="rotate(-45, 145, 150)" font-family="Helvetica" font-size="8" fill="red">first divergent boundary</text> 
        </g>
        <use x="145" y="150" xlink:href="#chain" />
        <text transform="rotate(-45, 157, 299)" x="157" y="299" font-family="Helvetica" font-size="8">related target</text>
    </g>
    <g id="lowest-common-boundary">
        <line x1="140" x2="160" y1="125" y2="125" stroke="green" />
        <text x="44" y="125" font-family="Helvetica" font-size="8" fill="green">lowest common boundary</text> 
    </g>
    <g id="shadow-boundary-3">
        <line x1="140" x2="160" y1="80" y2="80" stroke="lightgray" />
        <text x="163" y="77" font-family="Helvetica" font-size="8" fill="lightgray">shadow boundary</text> 
    </g>
    <use x="145" y="15" xlink:href="#chain" />
    <g id="document">
        <circle cx="150" cy="20" r="4" fill="white" stroke="black" />
        <text x="157" y="20" font-family="Helvetica" font-size="8">document</text>
    </g>
</svg>